<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>直播间</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name=”screen-orientation” content=”portrait”>
    <meta name=”x5-orientation” content=”portrait”>
    <meta name=”browsermode” content=”application”>
    <meta name=”x5-page-mode” content=”app”>
    <meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1">
    <meta name="format-detection" content="telephone=no,email=no,address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-touch-fullscreen" content="yes">
    <link rel="stylesheet" href="style.css">
    <script src="lib/vue.min.js"></script>
    <script src="lib/crypto-js.js"></script>
    <script src="lib/axios.min.js" type="text/javascript"></script>
    <script src="js/fetch.js" type="text/javascript"></script>
    <script src="lib/bubble-hearts.min.js"></script>
    <script src="js/mixins.js" type="text/javascript"></script>
</head>
<body>
<div class="box" style="padding: 0;">
    <div v-if="!show" class="myLive">
        <img class="liveImg" :src="obj.pic" />
    </div>
    <nav v-if="!show" class="play" @click="play()">
        <img src="images/play.png" />
    </nav>
    <div class="live-hit">
        <nav class="live-headImg2 fl">
            <img class="fl" :src="obj.pic" />
        </nav>
        <aside class="fl">
            <p>直播Live</p>
            <span>{{obj.hit}}</span>
        </aside>
    </div>
    <video id="player" :class="show?'player show':'player'"  :src="url" width="100%" height="100%"></video>
    <div class="commentBox1">
        <section class="comment1">
            <nav class="comment-list">
                <span class="fl grade">一级</span>
                <p class="fl content">暖暖 <span>来了</span></p>
            </nav>
            <nav class="comment-list">
                <span class="fl grade">一级</span>
                <p class="fl content">暖暖 <span>来了来了来了来了来了来了</span></p>
            </nav>
            <nav class="comment-list">
                <span class="fl grade">一级</span>
                <p class="fl content">暖暖 <span>来了</span></p>
            </nav>
            <nav class="comment-list">
                <span class="fl grade">一级</span>
                <p class="fl content">暖暖 <span>来了来了来了来了来了来了</span></p>
            </nav>
        </section>
    </div>
    <div class="bubble" id="bubble"></div>
</div>
<script type="text/javascript">
    /*function play() {
     var box=window.document.getElementById('livebox');
     box.innerHTML='<video id="player"  src="http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8" style="background-color: #000;" width="100%" height="100%"></video>';
     var player=window.document.getElementById('player');
     player.play();
     }*/
    var random = {
        uniform : function ( min, max ) {
            return min + (max - min) * Math.random();
        },
        uniformDiscrete : function ( i, j ) {
            return i + Math.floor((j - i + 1) * random.uniform(0, 1));
        }
    };

    function initStage(images) {
        // Init stage
        var stage = new BubbleHearts();
        var canvas = stage.canvas;
        canvas.width = 100;
        canvas.height = 220;
        canvas.style['width'] = '100px';
        canvas.style['height'] = '220px';
        var bubble=document.getElementById('bubble');
        bubble.appendChild(canvas);
        // Bubble animation as default
        setInterval(function () {
            stage.bubble(images[random.uniformDiscrete(0, images.length - 1)]);
        }, 700);

        // Bubble animation as custom
        canvas.addEventListener('click', function () {
            var image = images[random.uniformDiscrete(0, images.length - 1)];
            stage.bubble(image, 3000, function ( lifespan ) {
                // You got its lifespan, and from 1 to 0
                if (lifespan >= 0) {
                    stage.context.drawImage(
                        image,
                        (canvas.width - image.width) / 2,
                        // lifespan control its positionY, so that it will look like fly up
                        (canvas.height - image.height) * lifespan,
                        image.width,
                        image.height
                    );
                } else {
                    // Return true to free the memory
                    return true;
                }
            });
        }, false);
    }
    var imagesLoaded=[];
    function getImages() {
        var assets = [
            './images/1.png',
            './images/2.png',
            './images/3.png'
        ];
        var images=[];
        for(var i=0;i<assets.length;i++){
            var image = new Image;
            image.width=25;
            image.height=25;
            image.src = assets[i];
            image.onload=function () {
                imagesLoaded.push(1);
            };
            images.push(image);
        }
        return images;
    }
    var bubbleImages=getImages();
    var loadInterval=setInterval(function () {
        if(imagesLoaded.length==3) {
            clearInterval(loadInterval);
            initStage(bubbleImages);
        }
    },10);
    var app=new Vue({
        el:'.box',
        mixins: [mixins],
        data:function(){
            return {
                obj:{},
                url:'http://tx2.a.yximgs.com/udata/W_sZA6m6rcKQU_zh.mp4',
                show:false
            }
        },
        created:function(){
            this.getData();
        },
        methods:{
            getData:function(){
                var vm=this;
                var id=vm.getQueryString('id');
                console.log(id);
                fetch.get('/zhubo/'+id).then(function (res) {
                    console.log(res);
                    vm.obj=res;
                }).catch(function (e) {
                    console.log(e)
                });
            },
            //截取url
            getQueryString:function(name){
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            },
            //播放
            play:function(){
                this.show=true;
                var player=window.document.getElementById('player');
                player.play();
            }
        }
    });
</script>
</body>
</html>